<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app"style="margin-top: 70px;text-align: center;" >
    <font face="宋体" size="5" color="red"><strong>---登录---</strong></font><p></p>
    <marquee direction="left" behavior="scroll"  scrollmount="1px" scolldely="4ms" width="250px" height="50px"><font face="宋体" color="#dc143c" size="4">❤欢迎使用山寨版图片服务器，请登录❤</font></marquee><br>
    <form v-on:submit.prevent="login()">
        <strong>用户名：</strong><input type="text" v-model="username">
        <br><br>
        <strong>&nbsp;密&nbsp;&nbsp;码：</strong><input type="password" v-model="password">
        <br><br>
        <input type="submit" value="登录">
    </form>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            username: '',
            password: '',
        },
        methods: {
            login: function () {
                // alert(this.username+", "+this.password)
                $.ajax({
                    url: "login",
                    type: "post",
                    data: "username="+app.username+"&password="+app.password,
                    context: this,
                    success: function(data, status) {
                        //如果登录成功，跳转到首页
                        if(data.ok){
                            window.location.href = "index.html";
                        }else{//登录失败，提示错误信息
                            alert(data.msg);
                        }
                    }
                })
            }
        }
    });
</script>
</body>
</html>